<template>
  <PageWrapper :contentFullHeight="true">
    <Card class="card">
      <a-tabs v-model:activeKey="data.activeKey" @change="handleTabChange" class="tab">
        <a-tab-pane key="Image" tab="图片" force-render></a-tab-pane>
        <a-tab-pane key="Voice" tab="语音" force-render></a-tab-pane>
        <a-tab-pane key="Video" tab="视频" force-render></a-tab-pane>
      </a-tabs>
      <component :is="currentComponent"></component>
    </Card>

  </PageWrapper>
</template>

<script lang="ts" name="weixin-mp-auto-reply" setup>
import { h, onMounted, reactive, computed } from 'vue'
import { PageWrapper } from '/@/components/Page';
import { Card } from 'ant-design-vue';
import { BasicForm, useForm } from '/@/components/Form';
import Voice from './components/Voice.vue';
import Video from './components/Video.vue';
import Image from './components/Image.vue';


const data = reactive<any>({
  activeKey: 'Image'
})

onMounted(() => {
  
})

const currentComponent = computed(() => {
  const componentType = {
    Voice: h(Voice, {objData: {}}),
    Video: h(Video, {objData: {}}),
    Image: h(Image, {objData: {}}),
  };
  return componentType[data.activeKey];
});

const handleTabChange = (key) => {
  data.activeKey = key;
}


</script>

<!--本组件样式-->
<style lang="less" scoped="scoped">
.form {
  margin-bottom: -20px;
}

.card {
  margin-bottom: 15px;
  .tab {
    margin-top: -20px;
  }
}
</style>
